<template>
  <view class="tabs-wrap" :style="{
        backgroundColor: bgColor,
        width: tabsWidth? tabsWidth+'rpx': 'auto',
        marginLeft: marginLeft? marginLeft+'rpx': '',
      }">
    <u-tabs-swiper
      ref="tabs"
      class="tabs"
      :is-scroll="false"
      :list="tabList"
      :current="currentTab"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :height="90"
      :font-size="30"
      bar-width="36"
      bar-height="16"
      :bar-style="barStyleObj"
      :gutter="40"
      :duration="0.2"
      :active-item-style="activeStyle"
      bg-color="transparent"
      @change="tabsChange"
    ></u-tabs-swiper>
  </view>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 0
    },
    tabList: {
      type: Array,
      default: function() {
        return []
      }
    },
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    tabsWidth: [String, Number],
    marginLeft: [String, Number],
    scale: {
      type: [String, Number],
      default: 1
    },
    inactiveColor:{
      type: String,
      default: '#555555'
    }
  },
  watch: {

  },
  data() {
    return {
      activeColor: this.$primaryColor,
      activeStyle: {
        color: "#333333",
        fontSize: "32rpx",
      },
    }
  },
  computed: {
    currentTab() {
      return this.current;
    },
    tabStyleObj() {
      return {
        backgroundColor: this.bgColor,
      }
    },
    barStyleObj() {
      return {
        background: 'linear-gradient(270deg, #F7F8FA 0%, #FF683A 100%)',
        borderRadius: '8rpx',
        bottom: '22rpx',
        transform: 'scale('+ this.scale+')',
        width: 36 + (1-this.scale)*200 + 'rpx',
      }
    }
  },
  methods: {
    tabsChange(index) {
      this.$emit('tabsChange', index);
    }
  },

}
</script>

<style lang="scss" scoped>
.tabs-wrap {
  background-color: #ffffff;
}
</style>